<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>应用商店</title>
		<link rel="stylesheet" href="/static/component/pear/css/pear.css" />

        <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
        <script src="/static/component/layui/layui.js"></script>
        <script src="/static/component/pear/pear.js"></script>
        <style>
            .pear-container .layui-tab-title .layui-this{ background: #fff}
            .pear-container .layui-tab-content{ background: #fff; padding: 15px;}
            .layui-btn-group .layui-this{ background: #0c6cc4 !important;}
            .layui-btn-group i{ padding-right: 5px; font-size: 12px}
            /* 进度线 */
            .lineProgress {
                width: 400px;
                height: 7px;
                background: #D9D9D9;
                position: relative;
                margin-top: 15px;
            }
            #filesize{ font-size: 14px; line-height: 26px}
            .lineProgress span {
                position: absolute;
                top: 0;
                left: 0;
                width: 0;
                height: 7px;
                background: #4B95F8;
                transition: width 10s ease-out;
            }
            .mygenerate1{ background:rgb(0 0 0 / 46%); width: 100%; height: 100vh; position: absolute; top:0px; margin: auto; z-index: 9999; display: none}
            .mygenerate_con{ width: 400px; margin: auto; position: relative; margin-top: 40vh; background: #fff; padding: 20px;}
            .anzhuang{ margin-top: 20px; display: none}
            .filter_data{position: relative}
            .filter_data i{ float: right; cursor: pointer}
            .filter_data i:hover{ color: #0a58ca}
            .filteron{ background: #1E9FFF;}
            .filteron span{color: #fff !important;}
            .topbar_con{position: relative; height: 30px;}
            .topbar_search{position: absolute; right: 0px;top:0px}
            .topbar_search .input_keyword{height: 30px; width:300px;}


        </style>
	</head>
<body class="pear-container">
<script type="text/html" id="barMenu">
    <button type="button" onclick="down_load({{d.id}});" class="layui-btn layui-btn-xs layui-btn-normal layui-btn-danger"><i class="ruinuo-icon icon-download" style="padding-right: 5px"></i>安装</button>
    <button type="button" onclick="app_view({{d.id}});" class="layui-btn layui-btn-xs layui-btn-normal"><i class="ruinuo-icon icon-browse"  style="padding-right: 5px"></i>详情</button>
</script>
<script type="text/html" id="barMenu_4">
    <button type="button" onclick="down_load({{d.id}});" class="layui-btn layui-btn-xs layui-btn-normal layui-btn-danger"><i class="ruinuo-icon icon-download" style="padding-right: 5px"></i>升级</button>
    <button type="button" onclick="app_view({{d.id}});" class="layui-btn layui-btn-xs layui-btn-normal"><i class="ruinuo-icon icon-browse"  style="padding-right: 5px"></i>详情</button>
</script>
<script type="text/html" id="tpl_price">
    {{#  if(d.price<= 0){ }}
    <span style="color: #0bcb9a">免费</span>
    {{#  } else { }}
    <span style="color: #f63f5d">￥{{d.price}}</span>
    {{#  } }}
</script>
<script type="text/html" id="tpl_demo">
    {{#  if(d.demo_url){ }}
    <a href="{{d.demo_url}}" target="_blank"> <i class="ruinuo-icon icon-home-fill" style="font-size: 24px !important; color: #1E9FFF"></i></a>
    {{#  } else { }}
    <i class="ruinuo-icon icon-home1" style="font-size: 24px !important; color: #999"></i>
    {{#  } }}
</script>


<div class="layui-tab">
    <ul class="layui-tab-title top_tab">
        <li class="layui-this" data-id="1">全部</li>
        <li data-id="2">应用</li>
        <li data-id="3">插件</li>
        <li data-id="4">模板</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
        <div class="topbar_con">
            <div class="layui-btn-group">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal " onclick="loadtable();" style="margin-right: 5px !important;background: #444c69; border-radius: 5px"><i class="layui-icon layui-icon-refresh-1"></i></button>
                <div class="layui-input-inline menu_tab">
                <button type="button" data-id="1" class="layui-btn layui-btn-sm layui-btn-normal layui-this" style="border-radius: 5px 0px 0px 5px">全部</button>
                <button type="button" data-id="2" class="layui-btn layui-btn-sm layui-btn-normal">免费</button>
                <button type="button" data-id="3" class="layui-btn layui-btn-sm layui-btn-normal">付费</button>
                <button type="button" data-id="4" class="layui-btn layui-btn-sm layui-btn-normal"  style="border-radius: 0px 5px 5px 0px">已购买</button>
                 </div>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="user();" style="margin-left: 5px !important;background: #f63f5d; border-radius: 5px"><i class="ruinuo-icon icon-user"></i>会员信息</button>
            </div>
            <div class="topbar_search">
                <div class="layui-input-inline"><input type="text" name="keyword" autocomplete="off" class="layui-input input_keyword" placeholder="输入名称检索"></div>
                <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="search();"><i class="layui-icon layui-icon-search"></i>搜索</button>
                <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="reset();" style="background: #444c69;"><i class="ruinuo-icon icon-responsetime"></i>重置</button>
                </div>
            </div>
        </div>

            <div class="layui-card-body"  style="padding:0px;">
                <table id="dataTable" lay-filter="dataTable"></table>
            </div>


        </div>

    </div>
</div>
<div class="mygenerate1">
    <div class="mygenerate_con">
    <div id="filesize"></div>
<div class="lineProgress">
    <span></span>
</div>
<div class="anzhuang">
    <button type="button" class="layui-btn layui-btn-normal" onclick="appinstall(1);">下载完成，现在安装？</button>
    <button type="button" class="layui-btn layui-btn-primary" onclick="appinstall(2);">暂不安装</button>
</div>

    </div>
</div>



<script>
    var filter_title=[]
        ,udata=[]
        ,wheredata= {sortarr: [],postdata:{},top_tab:1,menu_tab:1,system_key:'{:GetConfig('system', 'shop_key')}'},$=layui.jquery,api_url='{:GetConfig('system', 'shop_url')}'
        ,usertoken='{$usertoken.token}';
    layui.use(['table','form','layer','public','dropdown'], function(){
        loadtable();
        tab();
    });

    function loadtable()
    {
        var url=api_url+'/plugins/shop/wheredata';
        var cols=[{field:'demo_url', width:60, title: '前台',templet: '#tpl_demo',align: 'center'}
            ,{field:'rn_name', width:180, title: '名称'}
            ,{field:'cat_name', width:140, title: '<div class="filter_data"><span class="filter_name_rn_mid">分类</span><i class="ruinuo-icon icon-filter" data-field="rn_mid" onclick="tablefilter(this)"></i></div>'}
            ,{field:'intro', title: '介绍'}
            ,{field:'author_name', title: '作者', width: 150}
            ,{field:'price', width:90, title: '价格', sort: true,templet: '#tpl_price',align: 'center'}
            ,{field:'downloads', width:90, title: '下载', sort: true,align: 'center'}
            ,{field:'version_name',width:90, title: '版本',align: 'center'}
            ,{field:'rn_edit_time', width:160, title: '更新时间', sort: true}
            ,{field:'', width:165, title: '操作',templet: "#barMenu", fixed: "right"}];
        if (wheredata.menu_tab==4)
        {
            cols=[{field:'demo_url', width:60, title: '前台',templet: '#tpl_demo',align: 'center'}
                ,{field:'rn_name', width:180, title: '名称'}
                ,{field:'cat_name', width:140, title: '<div class="filter_data"><span class="filter_name_rn_mid">分类</span><i class="ruinuo-icon icon-filter" data-field="rn_mid" onclick="tablefilter(this)"></i></div>'}
                ,{field:'intro', title: '介绍'}
                ,{field:'author_name', title: '作者', width: 150}
                ,{field:'price', width:90, title: '价格', sort: true,templet: '#tpl_price',align: 'center'}
                ,{field:'downloads', width:90, title: '下载', sort: true,align: 'center'}
                ,{field:'version_name',width:90, title: '版本',align: 'center'}
                ,{field:'rn_edit_time', width:160, title: '更新时间', sort: true}
                ,{field:'', width:165, title: '操作',templet: "#barMenu_4", fixed: "right"}];
        }
        var elem='#dataTable';
        var dataTable = layui.table.render({
            elem: elem,
            height: 'full-140',
            cellMinWidth: 80,
            method: 'post',
            autoSort: false,
            loading: true,
            url: url,
            where: wheredata,
            page: true,
            limit: 30,
            drag: false,
            cols: [cols],
            even:true,
            parseData: function (res) {
                return {
                    "code": 0,
                    "msg": "OK",
                    "count": res.data.totalCount,
                    "data": res.data.rows
                }
            }
            ,done: function (res) {
                tablefilteron();
                tablesort();
            }
        })


    }
    function tablesort()
    {
    layui.table.on('sort(dataTable)', function (obj) {
        wheredata.sortarr=obj;
        loadtable();
    });
    }

    function tablefilter(obj)
    {
        var field=$(obj).attr('data-field');
        var filterdata=[{title: '===请选择===',id: ''}];
        layui.public.SendAJAX(api_url+'/plugins/shop/tablefilter', 'post', 'json', {field:field},function (res) {
            $.each(res.data.rows,function(key,value){

                filterdata.push(value);
            })

            layui.dropdown.render({
                elem: obj
                ,show: true
                ,data:filterdata
                ,click: function(obj){
                    wheredata.postdata[field]=obj.id;
                    filter_title[field]=obj.title;
                    loadtable();
                }
            });
        })





    }
    function tablefilteron()
    {
        $.each(wheredata.postdata,function(field,value){
           if (value)
           {
           $(".filter_name_"+field+"").parent("div").parent("span").parent("div").addClass('filteron');
           $(".filter_name_"+field+"").html(filter_title[field]);
           }
        })
    }

    function tab()
    {
        $(".top_tab li").click(function(){
            $(".top_tab li").removeClass('layui-this');
            $(this).addClass('layui-this');
            wheredata.top_tab=$(this).attr('data-id');
            loadtable();
        });
        $(".menu_tab button").click(function(){
            $(".menu_tab button").removeClass('layui-this');
            $(this).addClass('layui-this');
            wheredata.menu_tab=$(this).attr('data-id');
            loadtable();
        });
    }
    function search() {
        wheredata.keyword=$('.input_keyword').val();
        loadtable();
    }
    function reset() {
        wheredata.keyword='';
        wheredata.postdata= {};
        wheredata.sortarr=[];
        loadtable();
    }

    function user()
    {
        layui.rncontrol.RnViewOpen('会员信息','/admin/shop/userinfo','500','495');

    }
    function down_load(storeid)
    {
            layui.layer.load();
            layui.rncontrol.RnAjaxHeaders(api_url+'/plugins/shop/download/', 'post', 'json', {storeid:storeid},{token: usertoken,systemkey: wheredata.system_key},function (res) {
                layui.layer.closeAll('loading');
                if (res.code=="0")
                {
                    autherdown(res.data,storeid);
                    return false;
                }
                var width='500';
                if ($(window).width()<500){ width=0;}
                if (res.code=="2")
                {
                    layui.rncontrol.RnViewOpen('购买应用',api_url+'/plugins/pay/?id='+res.data,width,0);
                    return false;
                }
                if (res.code=="302")
                {
                    user();
                    return false;
                }
                layui.layer.msg(res.msg, {icon: 2});

            })

    }
    function app_view(id='')
    {
        window.open(api_url+'/store/view/?id='+id,'_blank');
    }
    function vlocation(res=[])
    {
        usertoken=res.token || '';
        location.href =window.location.href;
    }
    function autherdown(addonid='',storeid='')
    {
        layui.layer.load();
        layui.rncontrol.RnAjaxHeaders(api_url+'/plugins/shop/autherdown', 'post', 'json', {storeid:storeid,addonid:addonid},{token: usertoken,systemkey: wheredata.system_key},function (res) {
            layui.layer.closeAll('loading');
            if (res.code=="0")
            {
                $("#filesize").html('应用名称：'+res.data.app_name+'<br>应用编码：'+res.data.app_num+'<br>文件大小：'+res.data.size+'Kb')
                udata=res.data;
            Udownload();
            return false;
            }
            layui.layer.msg(res.msg, {icon: 2});
        })
    }
    function Udownload(url='/admin/shop/udownload')
    {
        $.ajax({
            url: url,
            type: "POST",
            timeout: 10000,
            data:udata,
            beforeSend: function () {
                setTimeout(function () {
                    $(".mygenerate1").show().find(".lineProgress span").css("width", "80%");
                }, 0)
            },
            success: function (res) {
                $(".lineProgress span").css({ "width": "100%", "transition": "none" });
                if (res.code==204)
                {
                    $(".lineProgress span").css({ "width": "0%", "transition": "none" });
                    layui.layer.msg(res.msg, {icon: 2});
                    return false;
                }

                if (url=='/admin/shop/install/')
                {
                    $(".mygenerate1").hide();
                    $(".anzhuang").hide();
                    layui.layer.msg('安装成功！', {icon: 6});
                    location.href =window.location.href;
                    return false;
                }

                // 进度到100%

                setTimeout(function () {
                    $(".anzhuang").show();
                }, 400)
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $(".anzhuang button").html('安装失败！');
                layui.layer.msg('安装失败！', {icon: 2});
                $(".lineProgress span").css({ "width": "0"})
                if (textStatus == "timeout") {
                    layui.layer.msg('下载超时', {icon: 2});
                    $(".mygenerate1").hide();
                    $(".lineProgress span").css({ "width": "0", "transition": "width 10s ease-out" })
                }
            }
        });

    }
    function appinstall(t=1)
    {
        if (t==2)
        {
        $(".mygenerate1").hide();
        $(".anzhuang").hide();
        }
        else
        {
         $(".anzhuang").html('<button type="button" class="layui-btn layui-btn-disabled layui-btn-fluid">正在安装中，请稍等</button>');
            $(".lineProgress span").css({ "width": "0"})
            Udownload('/admin/shop/install/');
        }


    }






</script>
	</body>
</html>
